<template>
  <div id="app">
    <zh-upload
      name="avatar"
      action="http://localhost:3000/upload"
      accept="image/jpeg"
      :file-list="fileList"
      :limit="3"
      :multiple="true"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :beforeUpload="beforeUpload"
      :drag="true"
    >
      <zh-button type="primary" icon="shangchuan"> 点击上传 </zh-button>
      <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </zh-upload>
  </div>
  <!-- virtuallist -->
  <!-- size是每一项高度 -->
  <!-- remain是能展示出来的条数 -->
  <!-- variable表示不定高 -->
  <!-- <zh-virtual-list 
    :size="80" 
    :remain="8" 
    :items="items"  
    :variable="true"> 
      <zh-virtual-list-item 
        slot-scope="{item}" 
        :item="item">
      </zh-virtual-list-item>
    </zh-virtual-list>
    </div> -->
  <!-- layout -->
  <!-- <zh-row>
      <zh-col :span="12">
        <div class="red">aaa</div>
      </zh-col>
      <zh-col :span="12">
        <div class="green">bbb</div>
      </zh-col>
    </zh-row>

     <zh-row>
      <zh-col :span="6" :offset="12">
        <div class="red">aaa</div>
      </zh-col>
      <zh-col :span="6" >
        <div class="green">bbb</div>
      </zh-col>
    </zh-row>

    <zh-row :gutter="20">
      <zh-col :span="6">
        <div class="red">ccc</div>
      </zh-col>
      <zh-col :span="6">
        <div class="red">ccc</div>
      </zh-col>
      <zh-col :span="6">
        <div class="red">ccc</div>
      </zh-col>
      <zh-col :span="6">
        <div class="red">ccc</div>
      </zh-col>
    </zh-row>

    <hr>

     <zh-row justify="end">
      <zh-col :span="3">
        <div class="red">ccc</div>
      </zh-col>
      <zh-col :span="3">
        <div class="red">ccc</div>
      </zh-col>
      <zh-col :span="3">
        <div class="red">ccc</div>
      </zh-col>
    </zh-row> -->

  <!-- <zh-pagination
    :total="10"
    :pager-count="6"
    :current-page.sync="currentPage"
    >

    </zh-pagination> -->

  <!-- carousel -->
  <!-- <zh-carousel
      height="200px"
      :autoplay="true"
      :delay="2000"
      :initial-index="1"
      :loop="true"
      @change="change"
    >
      <zh-carousel-item>
        <div class="content" style="background: red">内容1</div>
      </zh-carousel-item>
      <zh-carousel-item>
        <div class="content" style="background: blue">内容2</div>
      </zh-carousel-item>
      <zh-carousel-item>
        <div class="content" style="background: yellow">内容3</div>
      </zh-carousel-item>
    </zh-carousel>
  </div> -->

  <!-- table组件 -->
  <!-- {{ selectedItems }}
    <zh-table
      :columns="columns1"
      :data="data1"
      :selectedItems.sync="selectedItems"
      :orderBy.sync="orderBy"
       :height="200"
      @update:orderBy="sort"
      border
    >
    </zh-table> -->

  <!-- inputnumber组件 -->

  <!-- <zh-input-number v-model="num" @change="handleChange" :min="1" :max="10"></zh-input-number>

    <zh-input>
   
    </zh-input> -->
  <!-- select组件 -->
  <!-- <div>
         <zh-select v-model="value">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </zh-select>
    </div>
    -->

  <!-- dropdown -->
  <!-- <zh-dropdown>
      <span>下拉菜单</span>
      <zh-dropdown-menu>
        <zh-dropdown-item  command="a">111</zh-dropdown-item>
        <zh-dropdown-item  command="b">222</zh-dropdown-item>
        <zh-dropdown-item  command="c">333</zh-dropdown-item>
      </zh-dropdown-menu>
    </zh-dropdown>-->

  <!-- 输入框 -->
  <!-- <zh-input v-model="input"  type="textarea"  maxlength="10"   clearable  > -->
  <!--  -->
  <!-- show-password -->
  <!-- clearable -->
  <!-- </zh-input> -->

  <!-- checkbox和checkboxgrouop -->
  <!-- <zh-checkbox @change="handleChangeAll"  v-model="checkAll"></zh-checkbox>
    <zh-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <zh-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</zh-checkbox>
    </zh-checkbox-group>-->
</template>

<script>
import Mock from "mockjs";
let items = [];
for (let i = 0; i < 10000; i++) {
  items.push({ id: i, value: Mock.Random.sentence(5, 20) });
}
console.log(items);
export default {
  name: "App",

  // virtual-scroll

  data() {
    return {
      items,

      fileList: [
        { url: "xxx", name: "" },
        { url: "xxx", name: "" },
      ],
    };
  },

  methods: {
    handleChange() {},
    handleExceed() {
      console.log('用户上传超出限制');
    },
    handleSuccess() {},
    handleError() {},
    handleProgress() {},
    beforeUpload(rawFile){
      console.log("rawfile1", rawFile);
      let limitSize = rawFile.size/1024 >500
      console.log("limitSize", rawFile.size/1024);
      if(limitSize){
        console.log(1);
        return false
      }else if(this.accept){
        console.log(2);
        if(!rawFile.name.endWith('.jpg')){
          console.log("文件类型不对");
          return false
        }
       
      } 
       return true
      
    }
  },

  // pagination
  // data() {
  //   return { currentPage: 1 };
  // },

  // carousel
  // methods: {
  //   change(index) {
  //     console.log(index)
  //   },
  // },
};
// table
// import zfTable from "./packages/table";
// export default {
//   name: "App",
//   components: {
//     // 需求引入和注册表格
//     zfTable,
//   },
//   data() {
//     return {
//       orderBy: {
//         // name: "asc",
//         age: "asc",
//         address: "desc",
//       },
//       selectedItems: [], // 当前用户选中了哪一项
//       columns1: [
//         {
//           title: "Name",
//           key: "name",
//         },
//         {
//           title: "Age",
//           key: "age",
//         },
//         {
//           title: "Address",
//           key: "address",
//         },
//       ],
//       data1: [
//         {
//           id: 1,
//           name: "John Brown",
//           age: 18,
//           address: "New York No. 1 Lake Park",
//           date: "2016-10-03",
//         },
//         {
//           id: 2,
//           name: "Jim Green",
//           age: 24,
//           address: "London No. 1 Lake Park",
//           date: "2016-10-01",
//         },
//         {
//           id: 3,
//           name: "Joe Black",
//           age: 30,
//           address: "Sydney No. 1 Lake Park",
//           date: "2016-10-02",
//         },
//         {
//           id: 4,
//           name: "Jon Snow",
//           age: 26,
//           address: "Ottawa No. 2 Lake Park",
//           date: "2016-10-04",
//         },
//         {
//           id: 5,
//           name: "John Brown",
//           age: 18,
//           address: "New York No. 1 Lake Park",
//           date: "2016-10-03",
//         },
//         {
//           id: 6,
//           name: "Jim Green",
//           age: 24,
//           address: "London No. 1 Lake Park",
//           date: "2016-10-01",
//         },
//         {
//           id: 7,
//           name: "Joe Black",
//           age: 30,
//           address: "Sydney No. 1 Lake Park",
//           date: "2016-10-02",
//         },
//         {
//           id: 8,
//           name: "Jon Snow",
//           age: 26,
//           address: "Ottawa No. 2 Lake Park",
//           date: "2016-10-04",
//         },
//       ],
//     };
//   },
//   methods: {
//     handleChange(value) {
//       console.log(value);
//     },
//     sort(r) {
//       console.log(r);
//     },
//   },
// };

// select组件
// import Input from './packages/Input'
// export default {
//   name: 'App',
//   data() {
//     return {
//       options: [{
//         value: '选项1',
//         label: '黄金糕'
//       }, {
//         value: '选项2',
//         label: '双皮奶'
//       }, {
//         value: '选项3',
//         label: '蚵仔煎'
//       }, {
//         value: '选项4',
//         label: '龙须面'
//       }, {
//         value: '选项5',
//         label: '北京烤鸭'
//       }],
//       value: ''
//     }

//   },
//   components: {
//     Input

//   },
// }

// dropdown
// import dropdown from './packages/dropdown'
// export default {
//   name: "App",
//   data() {
//     return {

//     }
//   },
//   components: {
//     dropdown

//   },
//   methods: {

//   }
// }

// input
// import Input from './packages/Input'
// export default {
//   name: "App",
//   data(){
//     return{
//       input:''
//     }
//   },
//   components: {
//     Input

//   },
//   methods: {

//   }
// }

/*
checkbox和checkboxgroup
// import Checkbox from "./packages/checkbox.vue";
// import  CheckboxGroup from './packages/checkbox-group.vue'


// const cityOptions = ['北京', '上海']

// export default {
//   name: "App",

//   data() {
//     return {
//        checkAll: false,
//       checked: false,
//       indeterminate: false,
//       disabled: false,
//       cities: cityOptions,
//       checkedCities: ['上海']


//       // checks:[
//       //   {
//       //     label:'上海',
//       //     value:'shanghai'
//       //   },
//       //   {
//       //     label:''
//       //   }
//       // ]
//     }
//   },
//   components: {
//     Checkbox,
//     CheckboxGroup
//   },
//   methods:{
//     handleChangeAll(val){
//       console.log('val1', val);
//       // if(val){
//       //   console.log('进入分支');
//       //    this.checkedCities = this.cityOptions
//       // }else{
//       //    this.checkedCities = []
//       // }
//       this.checkedCities = val ? cityOptions : []
//       console.log(' this.checkedCities',  this.checkedCities);
//       this.indeterminate = false
//       console.log('handleChangeAll val', val);
//       console.log('handleChangeAll', this.checkboxGroup);
//     },
//     handleCheckedCitiesChange(value){
//       console.log('进入handleCheckedCitiesChange');
//       console.log('handleCheckedCitiesChange value', value);
//       let checkedCount = value.length
//       console.log('checkedCount', checkedCount.length);
//       console.log('this.cities.length', this.cities.length);
//        this.checkAll = checkedCount === this.cities.length;
//     }
//   }
// }
*/
</script>

<style lang="scss">
.content {
  height: 100%;
  width: 100%;
}

.red {
  background: red;
}

.green {
  background: green;
}
</style>
